import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux, Link } from 'dva/router'
import { connect } from 'dva'
import { Button, Popconfirm, Row, Col } from 'antd'
import { List, Page } from 'components'
import queryString from 'query-string'
import { ListMenuType } from 'utils/enums'
import { adminCompanyAccoutType } from 'utils/seletLocalData'
import Modal from './Modal'
import styles from '../../themes/list.less'
import Filter from './Filter'

const AdminCompanyAccountData = ({ location, dispatch, adminCompanyAccountData, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, currentItem, modalVisible, modalType, pagination, selectedRowKeys, addressType, currenciesData, parentId } = adminCompanyAccountData
  const { pageSize } = pagination
  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: 800,
    optionData: { currenciesData },
    confirmLoading: loading.effects['adminCompanyAccountData/update'],
    title: `${modalType === 'create' ? 'Create' : 'Update'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: `adminCompanyAccountData/${modalType}`,
        payload: {
          data,
        },
      })
    },
    onCancel () {
      dispatch({
        type: 'adminCompanyAccountData/hideModal',
      })
    },
  }
  const listProps = {
    dataSource: list,
    menuType: ListMenuType.MENU_UPDATE + ListMenuType.MENU_DELETE,
    loading: loading.effects['adminCompanyAccountData/list'],
    location,
    pagination,
    columnsData: [
      {
        title: 'Index',
        dataIndex: 'index',
        render: (text, record, index) => {
          return (
            <span>
              {index + 1}
            </span>
          )
        },
      },
      {
        title: 'AccountName',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => {
          return (
            <a onClick={() => {
              dispatch(routerRedux.push({
                pathname: `/adminCompanyAccount/detail/${record.id}/${record.name}`,
              }))
            }}
            >{text}</a>
          )
        },
      },
      {
        title: 'AccountNumber',
        dataIndex: 'accountNumber',
        key: 'accountNumber',
      },
      {
        title: 'CurrencyCode',
        dataIndex: 'currencyCode',
        key: 'currencyCode',
      },
      {
        title: 'Type',
        dataIndex: 'type',
        key: 'type',
        render: (text, record) => {
          let res = ''
          adminCompanyAccoutType.forEach((e) => {
            if (e.key === record.type) {
              res = e.value
            }
          })
          return res
        },
      },
      {
        title: 'Bank',
        dataIndex: 'bankName',
        key: 'bankName',
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        key: 'amount',
        render: (text, record) => {
          return record.amount.toFixed(4)
        },
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'adminCompanyAccountData/delete',
        payload: { id },
      })
    },
    onEditItem (item) {
      dispatch({
        type: 'adminCompanyAccountData/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
          type: addressType,
        },
      })
    },
    onRowDoubleClick (record) {
      dispatch(routerRedux.push({
        pathname: `adminCompanyAccount/detail/${record.id}/${record.name}`,
      }))
    },
  }
  const onAdd = () => {
    dispatch({
      type: 'adminCompanyAccountData/showModal',
      payload: {
        modalType: 'create',
        currentItem: {},
        type: addressType,
      },
    })
  }
  const filterProps = {
    filter: {
      ...location.query,
    },
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        search: queryString.stringify({
          ...value,
          page: 1,
          pageSize,
        }),
      }))
    },
    onCreateAdd: onAdd,
    optionData: { currenciesData },
  }
  return (
    <Page inner>
      <Filter {...filterProps} />
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

AdminCompanyAccountData.propTypes = {
  adminCompanyAccountData: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}


export default connect(({ adminCompanyAccountData, loading }) => ({ adminCompanyAccountData, loading }))(AdminCompanyAccountData)
